ES6的基础知识(二)

demo地址

函数

• 默认参数

  function Person(name = "xiaohong", age = 18) {
    this.name = name;
    this.age = age;
  }
  let person1 = new Person();
  
  console.log(person1.name); // xiaohong
  

• 省略参数

  function test(...arg) {
    let res = arg.reduce(function(sum, item) {
      return sum + item;
    });
    console.log(res); // 6
  }
  
  test(1, 2, 3);

• 箭头函数

  let sum = (a, b) => {
    return a + b;
  };
  console.log(sum(1, 2)); // 3
  
  // 单个参数可省略小括号,直接返回可省略函数大括号
  let double = num => num * 2;
  console.log(double(2)); // 4
  
  // 箭头函数没有this,内部的this就是上层代码块的this
  let obj = {
    name: "xiaohong",
    say: function() {
      // 指向上层代码块obj
      setTimeout(() => {
        console.log(this.name); // xiaohong
      });
  
      // 指向window
      setTimeout(function(){
        console.log(this.name); // undefined
      });
    }
  };
  obj.say();
  
  let fn = () => {
    console.log(this); // window
  };
  fn();

• Array.from()将类数组转成数组

  function sum() {
    return Array.from(arguments).reduce((val, item) => {
      return val + item;
    });
  }
  console.log(sum(1, 2, 4)); // 7

• fill填充数组

  let arr = [, ,];
  console.log(arr.fill(1)); // [1, 1]

• find找到数组中第一个满足条件的元素

  let arr = [1, 2, 3];
  let item = arr.find(item => {
    return item > 1;
  });
  console.log(item); // 2

• findIndex找到数组中第一个满足条件的元素索引

  let arr = [1, 2, 3];
  let index = arr.findIndex(item => {
    return item > 1;
  });
  console.log(index); // 1

• some数组中是否存在满足条件的元素

  let arr = [1, 2, 3];
  let flag = arr.some(item => {
    return item >= 3;
  });
  console.log(flag); // true

• every数组中是否所有元素都满足条件

  let arr = [1, 2, 3];
  let flag = arr.every(item => {
    return item >= 3;
  });
  console.log(flag); // false

对象

• 对象的属性和方法可简写

  let name = 'xiaohong';
  let obj = {
    // 当key值和变量一致时可省略
    name, 
    // 方法可简写成这样
    sayName(){}
  }

• 对象的继承

     let obj = {
       name:'xiaohong',
       sayName(){
         console.log(this.name)
       }
     };
     let newObj = {
       name:'xiaoli'
     };
     
     Object.setPrototypeOf(newObj, obj);
     newObj.sayName(); // xiaoli
  
  

• class类

     // 声明类,只能通过new生成对象,不能直接使用
     class Parent {
       // 构造函数
       constructor(name) {
         // 实例私有属性
         this.name = name;
       }
  
       // 静态属性 不需要通过实例调用,类直接用
       static hello() {
         return "hello";
       }
  
       // 实例公共方法
       sayName() {
         return this.name;
       }
     }
  
     // extends继承
     class Child extends Parent {
       constructor(name) {
         // super 父级的构造函数
         super(name);
       }
     }
  
     let p = new Child("xiaoli");
     console.log(p.name); // xiaoli
     console.log(p.sayName()); // xiaoli